<script setup>
import { computed } from "vue";
import * as echarts from "echarts";

const data = [
  { value: ["2023-11-01", 0] },
  { value: ["2023-11-02", 0] },
  { value: ["2023-11-03", 1] },
  { value: ["2023-11-04", 2] },
  { value: ["2023-11-05", 1] },
  { value: ["2023-11-06", 1] },
  { value: ["2023-11-07", 1] },
  { value: ["2023-11-08", 0] },
  { value: ["2023-11-09", 1] },
  { value: ["2023-11-10", 1] },
  { value: ["2023-11-11", 1] },
  { value: ["2023-11-12", 0] },
  { value: ["2023-11-13", 0] },
  { value: ["2023-11-14", 0] },
  { value: ["2023-11-15", 0] },
  { value: ["2023-11-16", 0] },
  { value: ["2023-11-17", 0] },
  { value: ["2023-11-18", 0] },
  { value: ["2023-11-19", 0] },
  { value: ["2023-11-20", 0] },
  { value: ["2023-11-21", 0] },
  { value: ["2023-11-22", 0] },
  { value: ["2023-11-23", 0] },
  { value: ["2023-11-24", 0] },
  { value: ["2023-11-25", 0] },
  { value: ["2023-11-26", 0] },
  { value: ["2023-11-27", 0] },
  { value: ["2023-11-28", 0] },
  { value: ["2023-11-29", 0] },
  { value: ["2023-11-30", 0] },
].map((item) => ({ value: [item.value[0], Math.ceil(Math.random() * 100)] }));

const option = computed(() => {
  return {
    tooltip: {
      formatter: function (params) {
        return "数量: " + params.value[1];
      },
    },
    visualMap: {
      min: 0,
      max: 100,
      inRange: {
        color: ["#244551", "#44e5fc", "#44e5fc", "#44e5fc", "#44e5fc"],
      },
      show: false,
    },
    color: ["#244551"],
    calendar: {
      left: 12,
      right: 12,
      top: "15%",
      orient: "vertical",
      range: ["2023-11"],
      itemStyle: { borderWidth: 0, color: "#244551" },
      splitLine: { show: false },
      yearLabel: { show: false },
      monthLabel: { show: false },
      cellSize: "auto",
      dayLabel: {
        firstDay: 1,
        margin: 10,
        nameMap: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        textStyle: { color: "#64aec7", fontSize: 16 },
      },
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "calendar",
        symbolSize: 1,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              const d = new Date(params.value[0]);
              return d.getDate();
            },
            textStyle: { color: "#fff" },
          },
        },
        itemStyle: { color: "red" },
        data,
      },
      {
        name: "数量",
        calendarIndex: 0,
        type: "heatmap",
        coordinateSystem: "calendar",
        data,
      },
    ],
  };
});
</script>

<template>
  <div class="chart">
    <nf-charts :options="option" />
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>
